<!-- extend from base layout -->
{% extends "base.html" %}
 
{% block content %}
	<link rel="stylesheet" type="text/css" href="http://v3.bootcss.com/examples/dashboard/dashboard.css">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">学生上机管理系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Name</a></li>
            <li><a href="/logout">Logout</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="/admin/stuinfo">学生管理<span class="sr-only">(current)</span></a></li>
          </ul>
          <ul class="nav nav-sidebar">
          	<li><a href="/admin/reservation">预约管理</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="/admin/computer">机器管理</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li class="active"><a href="/admin/statistics">上机统计</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="/admin/admin">管理员管理</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="/admin/log">显示日志</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h2 class="sub-header">上机统计<a href="/admin/statistics/class" class="btn btn-success">班级</a></h2>
          <div class="container-fluid">
            <div class="row">
              <form class="form-inline" action="/admin/statistics/student" method="POST">
                {{form.csrf_token}}
                <div class="form-group">
                  <label>开始日期：</label>
                  <input type="date" name="BeginDate" placeholder="开始日期">
                </div>
                <div class="form-group">
                  <label>截止日期：</label>
                  <input type="date" name="EndDate" placeholder="截止日期">
                </div>
                <div class="form-group">
                  <label>缺勤次数：</label>
                  <input type="number" name="Times" placeholder="缺勤次数">
                </div>
                <input type="submit" class="btn btn-default" value="查询">
              </form>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>班级</th>
                  <th>出勤次数</th>
                  <th>出勤率</th>
                </tr>
              </thead>
              <tbody>
              {%for stat_stu in stat_stus%}
                <tr>
                  <td>{{stat_stu.StuID}}</td>
                  <td>{{stat_stu.Name}}</td>
                  <td>{{stat_stu.Class}}</td>
                  <td>{{stat_stu.Count}}/{{stat_stu.All}}</td>
                  <td>{{stat_stu.Percent}}%</td>
                </tr>
              {%endfor%}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://v3.bootcss.com/dist/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="http://v3.bootcss.com/assets/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
{% endblock %}